<template>
  <el-scrollbar class="components-attr-edit">
    <div class="attr-edit-inner" v-if="activeElementUUID">
      <div class="props-attr-style">
        <propsAttr></propsAttr>
        <!-- 组件配置-->
        <div v-if="componentsNames.includes(elName)">
          <component :is="elName +'-config'"></component>
        </div>
      </div>
      <div class="common-attr-style">
        <!-- <baseAttr></baseAttr> -->
      </div>
    </div>
    <div v-else>
      <p class="gray paddingT30 text-center">请在画板上选择需要编辑得元素</p>
    </div>
  </el-scrollbar>
</template>

<script>
	import baseAttr from './attr-props-components/base-attr'
	import propsAttr from './attr-props-components/props-attr/index.vue'
  import { componentNames, components as ComponentList } from './index.js'
	import {mapState, mapGetters} from 'vuex'
	export default {
		props: {},
		components: {
			baseAttr,
			propsAttr,
      ...ComponentList
		},
		computed: {
			...mapState({
				projectData: state => state.editor.projectData,
				activePageUUID: state => state.editor.activePageUUID,
				activeElementUUID: state => state.editor.activeElementUUID
			}),
			...mapGetters([
				'currentPageIndex',
				'activeElementIndex',
        'activeElement'
			]),
      elName() {
        return this.activeElement? this.activeElement.elName : ''
      },
      componentsNames() {
        return componentNames || []
      }
		},
    created() {
      console.log('componentNames', componentNames)
    },
    mounted(){

    }
	}
</script>

<style scoped>
  .components-attr-edit {
    height: 100%;
  }

  .attr-title {
    font-weight: bold;
  }

  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }
</style>
<style lang="scss">
  .common-attr-style {
    .el-form-item {
      margin-bottom: 0;
    }
  }
</style>
